<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>实现随意摆放的照片墙</title> 
<style type="text/css">
body{
background:url(images/bg.png)}
#img1{
position:absolute;
width:130px;   
height:97px; 
top:20px; 
left:30px;
-webkit-transform:rotate(-30deg);
}
#img2{
position:absolute;
border:solid 1px #ccc;
width:130px;   
height:97px; 
top:120px; 
left:130px;
-webkit-transform:rotate(-10deg);
}
#img3{
position:absolute;
border:solid 1px #ccc;
width:130px;   
height:97px; 
top:220px; 
left:230px;
-webkit-transform:rotate(30deg);
}
</style>
<script type="text/javascript">
function $$(id) {
    return document.getElementById(id);
}    
var initX,initY,offsetX,offsetY;
//自定义页面加载时调用的函数
function pageload() {
    var img1 = $$("img1");
	var img2 = $$("img2");
	var img3 = $$("img3");
	img1.style.left = 30 + "px";
    img1.style.top = 20 + "px";
	img2.style.left = 130 + "px";
    img2.style.top = 120 + "px";
	img3.style.left = 230 + "px";
    img3.style.top = 220 + "px";
}
function mousedown(event){
    initX = parseInt(event.target.style.left);
    initY = parseInt(event.target.style.top);
    offsetX = event.clientX;
    offsetY = event.clientY;
    //鼠标移动时触发的事件
    document.onmousemove = function(e) {
        var x = e.clientX - offsetX + initX;
        var y = e.clientY - offsetY + initY;
        event.target.style.left = x + "px";
        event.target.style.top = y + "px";
        return false;
    };
    //鼠标弹起时触发的事件
    document.onmouseup = function() {
        document.onmousemove = null;
    }
}
</script>

</head> 
<body onLoad="pageload();"> 
<img id="img1" onmousedown="mousedown(event)" src="images/Lighthouse.jpg">
<img id="img2" onmousedown="mousedown(event)" src="images/Penguins.jpg">
<img id="img3" onmousedown="mousedown(event)" src="images/Tulips.jpg">
</body> 
</html> 
